<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<html lang="en">
<head>
    <title>搜索好友</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <jsp:include page="./include/commonfiles.jsp"/>
</head>
<body>
<%--<div class="layui-layout layui-layout-admin">--%>
<jsp:include page="include/silderbar.jsp"/>
<div class="layui-body " style="margin:0 auto; width: 89.3%;height: 100%;background-size:cover;margin-left: 0px">
    <div class="content">
        <div class="search-cont">
            <input id="searchname" type="text" class="search" placeholder="请输入用户名...">
            <button id="sear" onclick="findfriends()">搜索</button>
        </div>
        <div class="search-result">
            <table class="table table-hover">
                <caption><h3>搜索结果</h3></caption>
                <thead>
                <th>用户名</th>
                <th>昵称</th>
                <th>性别</th>
                <th>地址</th>
                <th>签名</th>
                <th>添加好友</th>
                </thead>
                <tbody id="frie"></tbody>
            </table>
        </div>
        <%--申请表--%>
        <div id="showchecks">
            <table class="table table-hover">
                <caption><h3>好友申请表</h3></caption>
                <thead>
                <th>用户名</th>
                <th>昵称</th>
                <th>性别</th>
                <th>个性签名</th>
                <th>是否同意？</th>
                </thead>
                <tbody id="showcheckapply">
                <c:forEach items="${applylists}" var="lis">
                    <tr>
                        <td>${lis.username}</td>
                        <td>${lis.nickname}</td>
                        <td>${lis.sex}</td>
                        <td>${lis.personalsignature}</td>
                        <td><a href="${path}/passcheck?reponsedper=${userInfo.username}&&requestper=${lis.username}">同意</a>&nbsp;
                            <a href="${path}/unpasscheck?reponsedper=${userInfo.username}&&requestper=${lis.username}">不同意</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>

    <%--<button id="add" onclick="addfriend(data.username)"></button>--%>
    <style>

        .content{
            width: 70%;
            height: 800px;
            border-radius: 4px;
            position: relative;
            margin:0 auto;
        }
        .search-cont {
            position: relative;
            width: 80%;
            margin:25px auto;   /*居中*/
        }
        .search-cont input {
            border-radius: 3px;
            width: 100%;
            height: 50px;
            text-align: center;
            background-color: #a6c1ee;
            border-top: 0px;
            border-right: 0px;
            border-left: 0px;
            font-size: medium;
            transition:0ms;
        }
        .search-cont input:hover{
            border: 2px solid #fecfef;
            transform: translateZ(-100px);
            box-shadow: 0 2px 1.5px -1px;
            background-color:#fecfef ;
        }

        .search-result{
            position: relative;
            width: 800px;
            margin:25px auto;
            background-color: #a6c1ee;
        }
        thead{
            text-align: center;
            background-color: wheat;
        }
        .search-cont button {
            position: absolute;
            top: 30%;
            right: 2px;
            background-color: #a6c1ee;
            border: none;
            font-size: medium;
        }

        button{
           width: 90px;
            height: 30px;
            background-color: #00d747;
            border-radius: 3px;
            text-decoration-color: white;
            /*z-index: initial;*/
            border: none;
        }
    </style>
    <script src="${path}/js/jquery-3.6.0.js"></script>
    <script>
        //查寻好友的函数
        function findfriends() {
            var inputval=document.getElementById("searchname").value;
            //  alert(inputval);
            $.ajax({
                url:"${path}/findfriends",
                type:"post",
                async:false,
                data:{"username":inputval},
                dataType: 'json',
                success:function(data){
                    //把找到的结果穿上出
                    var html="";
                    if (data!=null){
                            html+="<tr>"+
                                "<td>"+data.username +"</td>"+
                                "<td>"+data.nickname +"</td>"+
                                "<td>"+data.sex +"</td>"+
                                "<td>"+data.locals +"</td>"+
                                "<td>"+data.personalsignature +"</td>"+
                                "<td>"+"<button id='addfire'>"+"添加好友"+"</button>"
                                +"</tr>"
                    }
                    $("#frie").html(html);
                }
            });

            //点击添加，等待对方验证
            $("#addfire").click(function () {
                var inputval=document.getElementById("searchname").value;
                $.ajax({
                    url:"${path}/addfire",
                    type:"post",
                    async:false,
                    data: {"requestper":"${userInfo.username}","reponsedper":inputval},
                    success:function (data) {
                        if(data.stateCode.trim()=="1") {
                            $("#addfire").attr("disabled", "disabled");
                            alert("等待对方通过验证");
                        }
                    }
                })
            })
        }



        //同意 将当前登录用户名和该申请人username 插入到firends表中，并将answerper置 "好友添加成功"
        <%--$(".btu-pass").on('click',function () {--%>
        <%--    $.ajax({--%>
        <%--        url:"${path}/passcheck",--%>
        <%--        type:"post",--%>
        <%--        async:false,--%>
        <%--        data:{"reponsedper":"${userInfo.username}","requestper":},--%>
        <%--        success:function (data) {--%>
        <%--            alert("成功");--%>

        <%--        }--%>
        <%--    })--%>
        <%--});--%>



    </script>
</div>
<%--</div>--%>
</body>
</html>
